<!--
 * @Description:
 * @Author: 崔堂袁
 * @Date: 2021-04-23 23:10:47
 * @LastEditTime: 2021-06-04 12:08:53
-->
<template>
  <div class="welcome">
    <!-- logo -->
    <div class="logo">
      <img src="@/assets/logo.png">
    </div>
    <!-- title -->
    <div class="welcome-title">
      <span>欢迎来到基于Vue.js和webGL的三维场景开发网!</span>
      <span>Welcome to the 3D scene development network based on Vue.js and webGL!</span>
    </div>
    <!-- enter按钮 -->
    <a-button type="primary"
              size="large"
              @click="showLoginModal">进入网站（Enter the website）</a-button>
    <!-- 登陆/注册弹框 -->
    <a-modal class="loginModal"
             v-model:visible="showModal"
             :title="$t(`lang.${loginLang}.modalTitle`)"
             :okText="$t(`lang.${loginLang}.login`)"
             :cancelText="$t(`lang.${loginLang}.cancel`)"
             @ok="handleOk">
      <a-spin :spinning="spinning">
        <div class="loginRegister">
          <div class="languageAndTitle">
            <button class="languageSupport"
                    @click="laguageChange">
              <TranslationOutlined />
            </button>
            <div class="loginTitle"><span>{{$t(`lang.${loginLang}.loginTitle`)}}</span></div>
          </div>
          <!-- 表单 -->
          <div class="loginFrom">
            <!-- 账号 -->
            <div class="userName">
              <div class="title">{{$t(`lang.${loginLang}.account`)}}：</div>
              <div class="input">
                <a-input :placeholder="$t(`lang.${loginLang}.inputAccountTitle`)"
                         v-model:value="userAccount">
                  <template #prefix>
                    <user-outlined type="user" />
                  </template>
                  <template #suffix>
                    <CloseCircleOutlined @click="clearUserName" />
                  </template>
                </a-input>
              </div>
            </div>
            <!-- 密码 -->
            <div class="passWord">
              <div class="title">{{$t(`lang.${loginLang}.passWord`)}}：</div>
              <div class="input">
                <a-input-password v-model:value="userPassWord"
                                  :placeholder="$t(`lang.${loginLang}.inputPassWordTitle`)">
                  <template #prefix>
                    <UnlockOutlined />
                  </template>
                </a-input-password>
              </div>
            </div>
            <!-- 确认密码 -->
            <div class="confirmPassWord"
                 v-if="!isLogin">
              <div class="title">{{$t(`lang.${loginLang}.confirmPassWord`)}}：</div>
              <div class="input">
                <a-input-password v-model:value="userConfirmPassWord"
                                  :placeholder="$t(`lang.${loginLang}.inputConfirmPassWordTitle`)">
                  <template #prefix>
                    <UnlockOutlined />
                  </template>
                </a-input-password>
              </div>
            </div>
            <!-- 注册链接 -->
            <div class="link-register">
              <a href="#"
                 @click="registerOrLoginClick">{{$t(`lang.${loginLang}.registerLink`)}}</a>
            </div>
          </div>

        </div>
      </a-spin>
    </a-modal>
  </div>
</template>

<script>
// import { useRouter } from 'vue-router'
import { TranslationOutlined, UserOutlined, CloseCircleOutlined, UnlockOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { useI18n } from 'vue-i18n'
import { ref, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
export default {
  components: {
    TranslationOutlined,
    UserOutlined,
    CloseCircleOutlined,
    UnlockOutlined
  },
  setup () {
    const { locale } = useI18n()
    const { proxy } = getCurrentInstance()
    const router = useRouter()

    // ----------点击进入网站,弹出登录/注册弹框-----------
    const showModal = ref(false) // 控制弹框显隐
    const spinning = ref(false) // 控制异步请求等待效果显隐
    const showLoginModal = () => {
      showModal.value = true
    }
    // 语言切换
    const laguageChange = () => {
      if (locale.value === 'ch') locale.value = 'en'
      else locale.value = 'ch'
      localStorage.setItem('language', locale.value)
    }
    // 表单信息
    const userAccount = ref('')
    const userPassWord = ref('')
    const userConfirmPassWord = ref('')
    // 点击清空图标
    const clearUserName = () => {
      userAccount.value = ''
      userPassWord.value = ''
      userConfirmPassWord.value = ''
    }
    // 点击注册/登录链接,注册和登录功能切换
    const isLogin = ref(true)
    const loginLang = ref('loginModal')
    const registerOrLoginClick = () => {
      userAccount.value = ''
      userPassWord.value = ''
      userConfirmPassWord.value = ''
      isLogin.value = !isLogin.value
      if (isLogin.value) loginLang.value = 'loginModal'
      else loginLang.value = 'registerModal'
    }
    // 登陆/注册按钮点击后调用
    const handleOk = () => {
      const userInformations = {
        account: userAccount.value,
        password: userPassWord.value
      }
      if (isLogin.value) { // 登录
        spinning.value = true // 异步请求等待效果
        proxy.$http.post('/api/user/userLogin', userInformations)
          .then((res) => {
            if (res.data.state === 'success') {
              message.success(proxy.$t('lang.loginModal.loginSuccess'))
              sessionStorage.setItem('loginState', true) // 保存登陆状态
              const userName = res.data.userName
              const userAccount = res.data.userAccount
              sessionStorage.setItem('userName', userName)
              sessionStorage.setItem('userAccount', userAccount)
              spinning.value = false
              router.push('/home')
            } else if (res.data === 'errAccount') {
              message.error(proxy.$t('lang.loginModal.accountErrorTitle'))
            } else if (res.data === 'errPassword') {
              message.error(proxy.$t('lang.loginModal.passWordErrorTitle'))
            } else {
              message.error(proxy.$t('lang.loginModal.unknownexception'))
            }
            spinning.value = false
          })
      } else { // 注册
        if (userInformations.password === '' || userConfirmPassWord.value === '') { // 密码不能为空
          message.error(proxy.$t('lang.registerModal.nullPassword'))
        }
        if (userInformations.password !== userConfirmPassWord.value) { // 两次输入密码不一致
          message.error(proxy.$t('lang.registerModal.differentPassword'))
        } else {
          spinning.value = true
          proxy.$http.post('/api/user/userRegister/find', userInformations)
            .then((res) => {
              return res.data
            }).then((value) => {
              if (value === 'notAllowRegister') message.error(proxy.$t('lang.registerModal.accountAlreadyExists'))
              if (value === 'allowRegister') addUser(userInformations)
            })
        }
      }
    }
    const addUser = (userInformations) => {
      proxy.$http.post('/api/user/userRegister/addUser', userInformations)
        .then((res) => {
          if (res.data === 'success') message.success(proxy.$t('lang.registerModal.registerSuccess'))
          else message.success(proxy.$t('lang.registerModal.registerFail'))
          spinning.value = false
        })
    }

    return {
      showLoginModal,
      handleOk,
      showModal,
      laguageChange,
      userAccount,
      userPassWord,
      clearUserName,
      userConfirmPassWord,
      registerOrLoginClick,
      isLogin,
      loginLang,
      spinning
    }
  }
}
</script>

<style lang='less' scoped>
.welcome {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  // justify-content: center;
  align-items: center;
  .logo {
    width: 250px;
    height: 250px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .welcome-title {
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 45px;
    flex-wrap: wrap;
    span {
      background: linear-gradient(
        to right,
        red,
        orange,
        green,
        blue,
        indigo,
        purple
      );
      background-clip: text;
      color: transparent;
      display: block;
      text-align: center;
    }
  }
  .ant-btn-lg {
    width: 40%;
    height: 50px;
    border-radius: 5px;
    transform: translate(0, 50px);
  }
}
</style>

<style lang='less'>
.loginModal {
  user-select: none;
  .ant-modal-title {
    text-align: center;
  }
  .ant-modal-body {
    padding: 0 20px;
    .loginRegister {
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: column;
      .languageAndTitle {
        width: 100%;
        height: 30px;
        display: flex;
        flex-direction: row;
        .languageSupport {
          width: 30px;
          height: 30px;
          font-size: 20px;
          display: flex;
          align-content: center;
          justify-content: center;
          cursor: pointer;
          color: @fontColor;
          outline: none;
          padding: 5px 0;
          border: 0;
          background-color: inherit;
        }
        .loginTitle {
          width: 442px;
          text-align: center;
          font-size: 15px;
          line-height: 30px;
        }
      }
      .loginFrom {
        width: 100%;
        height: 170px;
        padding: 10px 0;
        display: flex;
        flex-direction: column;
        .userName,
        .passWord,
        .confirmPassWord {
          width: 100%;
          flex: 1;
          display: flex;
          flex-direction: row;
          .title {
            height: 100%;
            flex: 1;
            text-align: end;
            line-height: 40px;
          }
          .input {
            height: 100%;
            flex: 3;
            line-height: 40px;
            .ant-input-affix-wrapper {
              width: 250px;
            }
            .anticon-close-circle {
              color: rgba(0, 0, 0, 0.45);
              cursor: pointer;
              &:hover {
                color: rgba(0, 0, 0, 0.75);
              }
            }
          }
        }
        .link-register {
          text-align: center;
          font-size: 12px;
        }
      }
    }
  }
  .ant-modal-footer {
    > div {
      text-align: center;
    }
  }
}
</style>
